<link rel="stylesheet" href="../css/element.css">
<link rel="stylesheet" href="../css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="../js/element.js"></script>
<script src="../js/common.js"></script>

<style>
  .el-header {
    margin-bottom: 20px;
  }

/* 上传 */
.upload-demo {
  display: flex;
 }
 .el-list-enter-active,
 .el-list-leave-active {
   transition: none;
 }
 .el-list-enter,
 .el-list-leave-active {
   opacity: 0;
 }
 .el-upload-list {
   height: 40px;
 }

</style>

<!-- 模型一 -->
<div id="addNode">
  <el-container>
    <el-header >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >工具</el-breadcrumb-item>
        <el-breadcrumb-item>json解析</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main >
      <el-row style="margin-bottom:20px">
        <el-button type="primary" @click="formatData()">格式化</el-button>
        <el-button type="primary" @click="formatData()">压缩</el-button>
      </el-row>
       <el-row>
         <el-input type="textarea" v-model="jsonData" :autosize="{minRows: 2}"></el-input>
       </el-row>

    </el-main>
  </el-container>
</div>


<script>


  var app7 = new Vue({
  el: '#addNode',
  data() {
      return {
        jsonData:"",
      };
    },
    methods: {
      formatData() {
        txt=this.jsonData
        compress=false  //false  格式化json，true 压缩json
        var indentChar = '    ';
        if (/^\s*$/.test(txt)) {
            console.log('数据为空,无法格式化! ');
            return;
        }
        try {
            var data = eval('(' + txt + ')');
        } catch (e) {
            console.log('数据源语法错误,格式化失败! 错误信息: ' + e.description, 'err');
            return;
        }
        var draw = [],
            last = false,
            This = this,
            line = compress ? '' : '\n',
            nodeCount = 0,
            maxDepth = 0;

        var notify = function (name, value, isLast, indent, formObj) {
            nodeCount++; /*节点计数*/
            for (var i = 0, tab = ''; i < indent; i++)
                tab += indentChar; /* 缩进HTML */
            tab = compress ? '' : tab; /*压缩模式忽略缩进*/
            maxDepth = ++indent; /*缩进递增并记录*/
            if (value && value.constructor == Array) {
                /*处理数组*/
                draw.push(
                    tab + (formObj ? '"' + name + '":' : '') + '[' + line
                ); /*缩进'[' 然后换行*/
                for (var i = 0; i < value.length; i++)
                    notify(i, value[i], i == value.length - 1, indent, false);
                draw.push(
                    tab + ']' + (isLast ? line : ',' + line)
                ); /*缩进']'换行,若非尾元素则添加逗号*/
            } else if (value && typeof value == 'object') {
                /*处理对象*/
                draw.push(
                    tab + (formObj ? '"' + name + '":' : '') + '{' + line
                ); /*缩进'{' 然后换行*/
                var len = 0,
                    i = 0;
                for (var key in value)
                    len++;
                for (var key in value)
                    notify(key, value[key], ++i == len, indent, true);
                draw.push(
                    tab + '}' + (isLast ? line : ',' + line)
                ); /*缩进'}'换行,若非尾元素则添加逗号*/
            } else {
                if (typeof value == 'string') value = '"' + value + '"';
                draw.push(
                    tab +
                    (formObj ? '"' + name + '":' : '') +
                    value +
                    (isLast ? '' : ',') +
                    line
                );
            }
        };
        var isLast = true,
            indent = 0;
        notify('', data, isLast, indent, false);
        this.jsonData=draw.join('');
    }
  }
})
  
</script>